<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>go-gin-chat 聊天室</title>
    <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/rolling/css/rolling.css">
    <link rel="stylesheet" href="/static/stylesheets/style.css">
    <link rel="stylesheet" href="/static/emoji/emojionearea.min.css">
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
</head>
<body id="body-room" class="room" data-uid="{{ .user_info.uid }}" data-username="{{ .user_info.username }}"
      data-avatar_id="{{ .user_info.avatar_id }}" data-room_id="{{ .room_id }}">

<div class="scrollbar-macosx">
    <div class="header">
        <div class="toptext">
            <a href="/home">
                <span class="glyphicon glyphicon-arrow-left"></span> 返回大厅
            </a>
        </div>

        <ul class="topnavlist">
            <li class="userlist">
                <a class="a-user-list"><span class="glyphicon glyphicon-th-list"></span>用户列表</a>
                <div class="popover fade bottom in">
                    <div class="arrow"></div>
                    <h3 class="popover-title">在线用户 1 人</h3>
                    <div class="popover-content scrollbar-macosx">
                        <ul class="ul-user-list">
                            <li>
                                <img src="/static/images/user/12.png" alt="portrait_1">
                                <b>美国队长</b>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>

            <li><a class="_logout" href="javascript:;"> 退出登录 </a></li>
        </ul>
        <div class="clapboard hidden"></div>
    </div>
    <div id="mescroll" class="main container mescroll">
        <div class="col-md-12">
            <ul class="chat_info">

                <li id="chat-list-li-top" class="systeminfo">
                   <span style="cursor: pointer;">
                         提示：点击加载更多消息
                    </span>
                </li>

                <li id="hidden-chat-list-li-top" data-offset="100" data-list-cout="{{ .msg_list_count }}" style="display: none"></li>


                {{$uid:= .user_info.uid}}
                {{$nullSrl:= ""}}

                {{range .msg_list}}

                    {{if eq $uid .user_id}}

                        <li class="right">
                            <img src="/static/images/user/{{ .avatar_id }}.png" alt="">
                            <b>{{ .username }}</b>
                            <i>{{ .created_at }}</i>

                            {{ if eq .image_url $nullSrl }}

                            <div>{{ .content }}</div>
                                {{else}}
                            <div><img class="load-img" data-src="{{ .image_url }}" src="https://cdn.jsdelivr.net/gh/hezhizheng/static-image-hosting@master/image-hosting/20210420094013_LVZYIITUUVRWREEE.jpg"/></div>
                                {{end}}
                        </li>

                    {{else}}

                        <li class="left">
                            <img src="/static/images/user/{{ .avatar_id }}.png" alt="">
                            <b>{{ .username }}</b>
                            <i>{{ .created_at }}</i>
                            {{ if eq .image_url $nullSrl }}

                                <div>{{ .content }}</div>
                            {{else}}
                                <div><img class="load-img" data-src="{{ .image_url }}" src="https://cdn.jsdelivr.net/gh/hezhizheng/static-image-hosting@master/image-hosting/20210420094013_LVZYIITUUVRWREEE.jpg"/></div>
                            {{end}}
                        </li>

                    {{end}}
                {{end}}


            </ul>
        </div>
    </div>
    <div class="input">
        <div class="center">
            <div class="tools">

                <span class="glyphicon glyphicon-picture imgFileico"></span>

                <input type="file" class="imgFileBtn hidden" accept="image/*">

                <a href="https://github.com/hezhizheng/go-gin-chat" target="_blank">
                    <img src="https://cdn.jsdelivr.net/gh/hezhizheng/static-image-hosting@master/image-hosting/20210420094557_EXJYSDUKAFQLHAHZ.png" alt="Github" width="25px">
                </a>

            </div>
            <div class="text">
                <div class="col-xs-12 col-sm-12">
                    <input type="text" id="emojionearea2" placeholder="输入聊天信息...">
                </div>
            </div>
            <div class="_submit">
                <div class="col-xs-12 col-sm-12 text-right">
                    <a id="subxx" role="button"><span class="glyphicon glyphicon-share-alt"></span></a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>


<script type="text/javascript" src="//cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.staticfile.org/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/rolling/js/rolling.js"></script>
<script type="text/javascript" src="/static/javascripts/websocket-heartbeat.js"></script>
<script type="text/javascript" src="/static/javascripts/Public.js?t=2021628141400"></script>
<script type="text/javascript" src="/static/emoji/emojionearea.min.js"></script>
<script type="text/javascript" src="//cdn.staticfile.org/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="/static/javascripts/load-msg-more.js?t=20201027141958"></script>

<script>

    $(document).ready(function () {
        // WebSocketConnect

        let userInfo = {
            uid : {{ .user_info.uid }},
            username : {{ .user_info.username }},
            room_id : {{ .room_id }},
            avatar_id : {{ .user_info.avatar_id }},
        }
        WebSocketConnect(userInfo)

        // 滚动到底部
        $('.scrollbar-macosx.scroll-content.scroll-scrolly_visible').animate({
            scrollTop: $('.scrollbar-macosx.scroll-content.scroll-scrolly_visible').prop('scrollHeight')
        }, 500);
    });
</script>

<script>

    $(document).on('click', '.li-user-item', function(e) {
        let uid = $(this).attr('data-uid')
        let username = $(this).attr('data-username')
        let room_id = $(this).attr('data-room_id')
        let avatar_id = $(this).attr('data-avatar_id')

        let toUser = JSON.stringify({
            "uid": uid,
            "room_id": room_id,
            "avatar_id": avatar_id,
            "username": username,
        })

        let content = '/private-chat?uid='+uid+'&room_id='+room_id+'&avatar_id='+avatar_id+'&username='+username

        layer.open({
            type: 2,
            title : '与 ' +username + ' 聊天中',
            content: content,
            area : ['100%', '100%'],
            success: function(layero, index){

                var body = layer.getChildFrame('body', index);
                //var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：

                ws.onmessage = function (evt) {
                    var received_msg = JSON.parse(evt.data)
                    let time = _time(received_msg.data.time)
                    // console.log("private ",received_msg)
                    if (received_msg.status == 5 && received_msg.data.uid == uid)
                    {
                        body.find('.main .chat_info').html(body.find('.main .chat_info').html() +
                            '<li class="left"><img src="/static/images/user/' +
                            received_msg.data.avatar_id +
                            '.png" alt=""><b>' +
                            received_msg.data.username +
                            '</b><i>' +
                            time +
                            '</i><div class="aaa">' +
                            received_msg.data.content +
                            '</div></li>');
                    }else if (received_msg.status == 5){
                        layer.msg(received_msg.data.username+'：'+ received_msg.data.content);
                    }
                }

            },
            cancel:function(){
                parent.location.reload(); //TODO 暂时使用刷新解决，关闭iframe窗口 会触发一次 websocket 发送 接着直接关闭了连接
            }
        })

        // console.log("send toUser",toUser,content)
    });

</script>

<script>
    $("#emojionearea2").emojioneArea({
        pickerPosition: "top",
        tonesStyle: "radio",
        events: {
            keyup: function (editor, event) {
                if (event.which == 13) {
                    $('#subxx').click();
                }
            }
        }
    })
</script>

<script>

    $("._logout").click(function () {
        clearCookie();
        window.location.assign("/");
        // window.location.href = '/';
    });

    function foreach()
    {
        var strCookie=document.cookie;
        var arrCookie=strCookie.split("; ");
        for(var i=0;i<arrCookie.length;i++)
        {
            var arr=arrCookie[i].split("=");
            if(arr.length>0)
                DelCookie(arr[0]);
        }
    }
    function GetCookieVal(offset)
    {
        var endstr = document.cookie.indexOf (";", offset);
        if (endstr == -1)
            endstr = document.cookie.length;
        return decodeURIComponent(document.cookie.substring(offset, endstr));
    }
    function DelCookie(name)
    {
        var exp = new Date();
        exp.setTime (exp.getTime() - 1);
        var cval = GetCookie (name);
        document.cookie = name + "=" + cval + "; expires="+ exp.toGMTString();
    }
    function GetCookie(name)
    {
        var arg = name + "=";
        var alen = arg.length;
        var clen = document.cookie.length;
        var i = 0;
        while (i < clen)
        {
            var j = i + alen;
            if (document.cookie.substring(i, j) == arg)
                return GetCookieVal (j);
            i = document.cookie.indexOf(" ", i) + 1;
            if (i == 0) break;
        }
        return null;
    }
    function clearCookie(){
        var date=new Date();
        date.setTime(date.getTime()-10000);
        var keys=document.cookie.match(/[^ =;]+(?=\=)/g);
        if (keys) {
            for (var i =  keys.length; i--;)
                document.cookie=keys[i]+"=0; expire="+date.toGMTString()+"; path=/";
        }
    }

</script>

</html>